<template>
  <div>
      <div class="shops">
          <!-- 顶部的4条数据 -->
            <div class="shopTop">
                <ul>
                    <li v-for="(item,index) in shopTop" :key="index">
                        <img :src="item.firstImgUrl" alt="">
                        <div class="text">
                            <p class="tit van-multi-ellipsis--l2">{{item.title}}</p>
                        <p class="tit_1"></p>
                        <p class="price">{{item.priceSymbol}}{{item.priceDesc[0]}}</p>
                        </div>
                    </li>
                </ul>
            </div>
      </div>
  </div>
</template>

<script>
export default {
props:['shopCenter','shopTop',]
}
</script>

<style>
.shopTop{
    margin-top: 16px;
}
.shopTop ul{
    display: flex;
    flex-wrap:wrap ;
    justify-content: space-between;
    list-style: none;
}
.shopTop li{
    width: 172px;
    height: 266px;
    background: white;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 5px #c5c4c4;
}
.shopTop li img{
    width: 100%;
    height: 163px;
}
.text{
    padding: 8px;
}
.shopTop li .tit{
    font-size: 14px;
    height: 36px;
    line-height: 18px;
    overflow: hidden;

}
.shopTop li .tit_1{
    width: 100%;
    height: 14px;
    margin-top: 6px;
}
.shopTop li .price{
    font-size: 18px;
    padding: 0px 4px;
    margin-top: 4px;
    color:#ff5687
}

</style>